<template>
    <div class="good_list">
        <div class="tilte">猜你喜欢</div>
        <div class="btn_list">
            <div :class="{active:sortIndex==index}" @click="$emit('deliverIndex',index)" v-for="(item,index) in btnArr" :key="index">{{item}}</div> 
        </div>
        <div class="list_title">
            <div v-for="(item,index) in listArr" :key="index">{{item}}</div>
        </div>
        <div class="good" v-for="(item,index) in shoplist" :key="index" >
            <div class="good_img">
                <img :src="item.picUrl" alt="">
            </div>
            <div class="good_text">
                <div class="good_content">
                    <div class="name">{{item.name}}</div>
                    <span>⭐{{item.wmPoiScore}}</span>&nbsp;<span>{{item.monthSalesTip}}</span>
                </div>
                <div class="good_price">
                    <div class="price">
                        <span>{{item.minPriceTip}}</span>&nbsp;<span>{{item.shippingFeeTip}}</span> <span>￥6</span> 
                    </div>
                    <div class="time">
                        <span>{{item.deliveryTimeTip}}</span> <span>{{item.distance}}</span>
                    </div>
                </div>
                <div class="discounts" >
                    <div v-for="(a,b) in item.discounts2" :key="b" >{{a.info}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){ 
        return {
            btnArr:['综合排序','距离最近','销量最高','筛选'],
            listArr:['年货节热卖','津贴联盟','满减优惠','品质联盟']
        }
    },
    //通过props接收从父组件传来的值，该值是只读的(不能修改)
    // props:['shoplist'] //以数组形式接收
    props:{ 
        shoplist:{type:Array,default:[]},
        sortIndex:{type:Number,default:0},
    },
}
</script>

<style lang="scss" scoped>
    .good_list{
        width: 100%;
    }
    .good_list .tilte{
        width: 100%;
        height: 30px;
        font-weight: bold;
        padding-left: 10px;
        line-height: 30px;
        box-sizing: border-box;
    }
   .good_list .btn_list{
        width: 100%;
        display: flex;
        justify-content: space-around;
        margin: 5px 0;
   }
   .good_list .btn_list div{
        width: 20%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 5px;
   }
   .good_list .list_title{
        width: 100%;
        display: flex;
        justify-content: space-around;
        margin: 5px 0;
   }
   .good_list .list_title div{
        width: 23%;
        height: 30px;
        line-height: 30px;
        background: #f5f5f5;
        text-align: center;
        border-radius: 5px;
        font-size: 14px;
   }
   .good_list .good{
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 10px 0;
   }
   .good_list .good .good_img{
        width: 20%;
        height: 80px;
        margin-left: 10px;
        border: 1px solid #999999;
   }
   .good_list .good .good_img img{
        width: 100%;
   }
   .good_list .good .good_text{
        width: 75%;
        line-height: 20px;
    }
    .good_list .good .good_text .name{
       font-size: 18px;
       font-weight: bold;
       margin-bottom: 10px;
    }
    .good_list .good .good_text .good_content span{
       font-size: 12px;
    }
    .good_list .good .good_text .good_price{
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        padding-right: 5px;
        box-sizing: border-box;
    }
    .good_list .good .good_text .good_price .price span:nth-child(3){
        text-decoration:line-through;
        font-size: 12px;
    }
    .good_list .good .good_text .discounts{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .good_list .good .good_text .discounts div{
        line-height: 20px;
        text-align: center;
        color: red;
        border: 1px solid red;
        margin: 10px  10px 0 0 ;
        font-size: 12px;
        padding: 0 2px;
        box-sizing: border-box;
    }
    .active{
        font-weight: bold;
    }
</style>